<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>Answer The Question</title>
		<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/frontend/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/frontend/css/demo.css">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/frontend/css/stripe-button.css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
		<script src="<?php echo base_url(); ?>public/frontend/js/jquery.countdown360.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
    
    <div class="container"><hr />
    	<div class="row">
        	<div class="col-sm-5">
            	<div class="row">
                <div class="col-sm-6">
                    <img class="img-circle pull-right" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50" alt="User Pic">
                </div>
                <div class="col-sm-5">
                    <strong><?php echo $user_info["fname"]." ".$user_info["lname"] ?></strong><br>
                    <span class="text-muted">User level: Administrator</span>
                </div>
        </div>
            </div>
            <div class="col-sm-2" id="starter">
            <button class="btn btn-block btn-primary" id="start">Start</button></div>
            <div class="col-sm-5">
            <div class="row" id="online">
            <div class="progress progress-striped active">
              <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                Loading Online Users...
              </div>
            </div>
        	</div>
            </div>
        </div>
    </div>

		
	</body>
<script type="text/javascript" charset="utf-8">
$(document).ready( function() {
	setInterval(function(){
	$.post("<?php echo base_url(); ?>home/putUser"); // Sends request to update.php
	$.post("<?php echo base_url(); ?>home/getUser", function(list){
		$("#online").html(list);
		}); // Sends request to update.php
		}, 3000);
	
	$("#start").click(function(){
		$("#starter button").addClass("btn-stripe").text("Finding Opponent...");
		//update record to play = 1. mean ready to start to play
		$("#starter button").blur();
		$.post("<?php echo base_url(); ?>home/play");
		// search for match player. if found start to play.
		
		var found = false;
		var sel = false;
		setInterval(function(){
			if(!found){
				$.ajax({
				type: 'POST',
				url:"<?php echo base_url(); ?>home/search_matched",
				data: "type='search'",
				dataType: "json",
				success: function(result){
					if(result[0] == true){
						found = true;
						// do match
						$("#starter button").text("Found, starting...");
						setTimeout(function(){
							window.location.href = "<?php echo base_url(); ?>home/match";
							},2000);
						}else{
							$.ajax({
							type: 'POST',
							url:"<?php echo base_url(); ?>home/create_matched",
							data: "type='select'",
							dataType: "json",
							success: function(result){
								if(result[0] == true){
									sel = true;
									found = true;
									// do match
									$("#starter button").text("Found, starting...");
									setTimeout(function(){
									window.location.href = "<?php echo base_url(); ?>home/match";
									},2000);
									}
								}
							});
							}
					}
				});
				}
			
			}, 3000);
		// if not found, select one and play.
		});
		
});
</script>
</html>
